<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>租金的整体印象</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.js"></script>
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body style="height: 100%;width: 100%">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 700px;width: 98%"></div>

<!--<div>-->
    <!--<table border="1">-->
        <!--<tr>-->
            <!--<th>房间类型</th>-->
            <!--<th>数量</th>-->
            <!--<th>最高价格(元/月)</th>-->
            <!--<th>最低价格(元/月)</th>-->
            <!--<th>均价(元/月)</th>-->
            <!--<th>价格中位数(元/月)</th>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>合租</td>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
        <!--</tr>-->
    <!--</table>-->
<!--</div>-->

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var timeData = ['100','200',
        '300','400',
        '500','600',
        '700','800',
        '900','1000',
        '1200','1300',
        '1400','1500',
        '1600','1700',
        '1800','1900',
        '2000','2100',
        '2200','2300',
        '2400','2500',
        '2600','2700',
        '2800','2900',
        '3000','3100',
        '3200','3300',
        '3400','3500',
        '3600','3700',
        '3800','3900',
        '4000','4100',
        '4200','4300',
        '4400','4500',
        '4600','4700',
        '4800','4900',
        '5000'
    ];

    $.get("http://localhost:8080/ziroom/rentSurvey", function (res) {
        console.log(res.data);
        var item = res.data;
//        $("table td").eq(1).html(item.count);
//        $("table td").eq(2).html(item.maxPrice);
//        $("table td").eq(3).html(item.minPrice);
//        $("table td").eq(4).html(item.avgPrice);
//        $("table td").eq(5).html(item.medPrice);
        // 填入数据
        myChart.setOption({
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    onZero: true
                },
                data: timeData
            }, {
                gridIndex: 1
            }],
            series: [{
                data : item.priceList
            },{
                data : [
                    {value:item.count, name:'数量'},
                    {value:item.maxPrice, name:'最高价格(元/月)'},
                    {value:item.minPrice, name:'最低价格(元/月)'},
                    {value:item.avgPrice, name:'均价(元/月)'},
                    {value:item.medPrice, name:'价格中位数(元/月)'}
                    ]
            }]
        });
    });

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '租金的整体印象',
            x: 'left',
        },
        tooltip: {
//            trigger: 'axis',
            axisPointer: {
                animation: false
            },
            trigger: 'item',
//            formatter: tooltipFormatter
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        legend: {
            orient : 'vertical',
            left:'90%',
            top: '65',
//            x : 'right',
            data:['流量','数量','最高价格(元/月)','最低价格(元/月)','均价(元/月)','价格中位数(元/月)']
        },
        toolbox: {
            show : true,
            feature : {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {},
                saveAsImage: {}
//                restore : {show: true},
//                saveAsImage : {show: true}
            }
        },
//        calculable : true,
        axisPointer: {
            link: {
                xAxisIndex: 'all'
            }
        },
        dataZoom: [{
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        }, {
            type: 'inside',
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        }],
        grid: [{
            left: 40,
            right: 40,
        }, {
            left: 40,
            right: 40,
        }],
        xAxis: [{
            name: '月租:',
            type: 'category',
            boundaryGap: false,
            axisLine: {
                onZero: true
            },
            data: timeData
        }, {
            gridIndex: 1
        }],

        yAxis: [{

            type: 'value',
            max: 500,
            name: '房间数量:',
            min: 0,
            interval: 25

        }, {
            gridIndex: 1
        }],
        series: [{
            name: '数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 9,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                }
                ]
            },
            markArea: {
                silent: true,
                label: {
                    normal: {
                        position: ['10%', '50%']
                    }
                },
                data: [
                ]
            },
            date: []
        },{
            name:'访问来源',
            type:'pie',
//            left:'90%',
//            top: '65',
            radius : '40%',
            center: ['80%', '40%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>